<template>
  <transition name="fade" @after-leave="handleAfterLeave">
    <div class="ui-notice-box" v-if="visible">
      <div class="ui-notice">
        <p>{{message}}</p>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'toast',
  data(){
    return {
      message: '',
      type: '',
      visible: false
    }
  },
  methods:{
    show(){
      this.visible=true;
    },
    hide(){
      this.visible=false;
    },
    handleAfterLeave() {
      this.$destroy(true)
      this.$el.parentNode.removeChild(this.$el)
    },

  }
}
</script>

<style lang="scss" scoped>
.fade-enter-active, .fade-leave-active {
  transition: opacity .1s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
.ui-notice-box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  z-index: 50001;
  .ui-notice {
    position: fixed;
    bottom: 2.266667rem;
    text-align: center;
    left: 0;
    width: 100%;
    p{
      display: inline-block;
      box-sizing: content-box;
      margin: 0;
      font-size: .4rem;
      max-width: 100%;
      padding: .18rem .4rem;
      border-radius: .106667rem;
      background: rgba(115,115,115,.85);
      color: white;
      word-wrap: break-word;
      word-break: break-all;
    }
  }
}
</style>
